<template>
  <div class="user-nav-con">
    <!-- <div class="user">
      <i class="iconfont icon-yonghutouxiang"> </i>
      系统管理员
    </div> -->
    <div class="right-menu">
      <el-dropdown
        class="avatar-container right-menu-item hover-effect"
        trigger="click"
      >
        <div class="avatar-wrapper">
          <i class="el-icon-user-solid"></i>
          {{ userName }}
        </div>
        <el-dropdown-menu slot="dropdown">
          <el-dropdown-item divided @click.native="openPasswordEdit">
            <span>修改密码</span>
          </el-dropdown-item>
          <el-dropdown-item divided @click.native="logout">
            <span>退出登录</span>
          </el-dropdown-item>
        </el-dropdown-menu>
      </el-dropdown>
    </div>

    <!-- 修改密码弹窗 -->
    <el-dialog
      title="修改密码"
      class="tb-dialog"
      :visible.sync="DialogEditPassword"
      width="30%"
      :before-close="handleClose"
      :modal="false"
    >
      <div class="dialog-con"><EditPassword ref="editPasswordComp" /></div>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="savePassword()">保存</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import md5 from "js-md5";
import { ModifyPassword } from "@/api/login.js";
import EditPassword from "./comp/form/EditPassword.vue";
import {
  getUserName,
  removeToken,
  removeUserName,
  removeLevel,
} from "@/utils/auth";
export default {
  data() {
    return {
      userName: "",
      DialogEditPassword: false,
    };
  },
  components: {
    EditPassword,
  },
  methods: {
    openPasswordEdit() {
      this.DialogEditPassword = true;
    },
    savePassword() {
      const data = this.$refs.editPasswordComp.formData;
      if (data.NPassword != "") {
        ModifyPassword({
          NPassword: md5(data.NPassword),
        })
          .then((res) => {
            if (res.code == 200)
              this.$message({
                message: "修改成功",
                type: "success",
              });
          })
          .catch((err) => {
            this.$message({
              message: err,
              type: "error",
            });
          });
      } else {
        this.$message({
          message: "请先输入密码",
        });
      }
    },
    handleClose() {
      this.DialogEditPassword = false;
    },
    logout() {
      removeToken();
      removeUserName();
      removeLevel();
      this.$router.replace({ path: "/login" });
    },
  },
  mounted() {
    this.userName = getUserName();
  },
};
</script>

<style lang="less" scoped>
.user-nav-con {
  position: relative;
  display: flex;
  align-items: center;
}

.right-menu {
  float: right;
  height: 100%;

  &:focus {
    outline: none;
  }

  .right-menu-item {
    display: inline-block;
    padding: 0 8px;
    height: 100%;
    font-size: 18px;
    color: white;
    vertical-align: text-bottom;

    &.hover-effect {
      cursor: pointer;
      transition: background 0.3s;

      &:hover {
        background: rgba(0, 0, 0, 0.025);
      }
    }
  }
}

.tb-dialog {
  :deep(.el-dialog__header) {
    padding: 0rem !important;
    height: 0.48rem !important;
    line-height: 0.48rem !important;
    display: flex !important;
    background: #487efe;
    font-family: SourceHanSansCN;
    font-weight: bold;
    font-size: 0.16rem;
    padding-left: 0.16rem !important;

    .el-dialog__headerbtn {
      top: 0;
    }
    .el-dialog__title,
    .el-dialog__headerbtn .el-dialog__close {
      color: #ffffff !important;
      line-height: 0.48rem !important;
    }
  }
  .dialog-con {
    width: 100%;
    text-align: center;
    display: flex;
    justify-content: center;
  }
}
</style>
